datatables 插件做分页，有两种方式：
（1）后台返回所有数据，在前端分页；
（2）真正意义上的后台分页。
第一种前端分页比较简单，不做介绍，直接看第二种后台分页
html 代码 ：
| Foryou_id | Header Title | Title | Sub Title | Promo Type | Content | Product_id | Promo Photo | Operation |
|---|
js 代码 ：
$(document).ready(function() { $('#dt_travel_list').DataTable({//绑定要遍历数据的 table 的 id processing : true,/* 数据加载时显示进度条 */ paging : true,/* 开启分页 */ searching : true,/* 搜索框 */ pageLength : 25,/* 页大小，同时当前页每次加 10，不明白为什么每次增加 10 */ lengthChange : false,/* 是否允许用户改变表格每页显示的记录数 */ serverSide : true,/* 启用服务端分页，如果前端分页，这里为 false */ iDisplayLength : 25,// 不知什么用 pagingType : "full_numbers",//显示分页所有按钮 scrollX : true, autoWidth :true, ordering : false, ajax : { url : "foryouInfoAll", type : "post", data : {}, dataFilter : function(json){ return json; } }, /* 中间遍历的数据 */ columns : [ {data:"id",visible:false},//0 这里可以 {title:"Id编码",data:"id"} //title 列头标题，则可以省略前面 html 代码里面 ![promo photo]("+imgUrl+")
"; } }, { //orderable : false,//禁止排序 targets : [8], render : function(data,type,row,meta){ return ""; } } ] });}); 后台代码 ：
import com.fasterxml.jackson.databind.ObjectMapper; import org.json.JSONObject; import com.fasterxml.jackson.core.JsonProcessingException; @RequestMapping(value="/foryouInfoAll", method = RequestMethod.POST,produces = "text/plain;charset=UTF-8") @ResponseBody public Object foryouInfoAll(HttpSession session,HttpServletRequest request,HttpServletResponse response) { /** * 这几个参数后台直接取，前端不需要传! * 开启服务端分页后，datatables 会自动传！ */ Integer draw = Integer.parseInt(request.getParameter("draw"));//该参数取出来，不做任何操作，再传回去即可 Integer start = Integer.parseInt(request.getParameter("start"));//配合求当前页，第一次传进来是 0，然后 10，20，30 …… Integer pageSize = Integer.parseInt(request.getParameter("length"));//【页大小】 Integer nowPage = (start+pageSize)/pageSize;// 转成每次加 1 【当前页】 int total = foryouService.getCount();// 总数量 //自己处理分页逻辑 List beans = foryouService.getForYouInfo(nowPage,pageSize); /** * 最重要的格式处理！ * 工具类，处理成 datatable 规定的格式返回，才能正常显示！ */ DataTablePageUtil pages = new DataTablePageUtil<>(); pages.setRecordsTotal(total); pages.setRecordsFiltered(total); pages.setDraw(draw); pages.setData(beans); /** * 集合对象转成json数据返回 */ ObjectMapper MAPPER = new ObjectMapper(); String jsonString = MAPPER.writeValueAsString(pages); Object stringToValue = JSONObject.stringToValue(jsonString); System.out.println("==走完后台 foryouInfoAll 方法了=="); return stringToValue; } 工具类（后台必须返回 datatables 要求的数据格式，否则不能正常展示数据，该工具类必须返回的数据有 recordsTotal 和 recordsFiltered 和 data 这3个参数！）：
/** * recordsTotal * recordsFiltered * 这两个字段都是 总数据，具体什么区别不详 */@Data//提供get，set方法public class DataTablePageUtilimplements Serializable{ private int nowPage;//当前页（当前页和页大小也传可不传，但下面4个必传！） private int pageSize;//页大小 private int draw;//记录数 private long recordsTotal;//总数量 private long recordsFiltered;//总数据 private List data;//要展示的数据 bean }
工具类最后生成的数据格式（如果自己可以拼接成这种格式给前端，可以不用以上的工具类，工具类只是辅助数据处理，但必须符合这种格式才可以让 datatables 正常展示数据）
{ "draw": 1, "recordsTotal": 5, "recordsFiltered": 5, "data": [{ "id": "5ccfe25f84bc103a4c780eff", "title": "00", "header_title": "00", "sub_title": "00", "content": "00", "img_url": "https://xxx/tpc/pb/thumbnail_Capture001.png_3dce77.png", "foryou_type": "inviter" }, { "id": "5cce8d49ee0e371ab31dda1f", "title": "6这是主标题", "header_title": "6这是头部标题", "sub_title": "6这是副标题", "content": "6文字内容吧啦吧啦一大堆！！", "img_url": "https://xxx/tpc/pb/foryou/foryou_medical_card001.png", "product_id": "5ba067dc5fbab3fd0901d400", "foryou_type": "product" }]}